<script setup lang="ts">
  import {
    ActionItem,
    BasicColumn,
    BasicTable,
    EditRecordRow,
    TableAction,
    useTable,
  } from '@/components/Table';
  import { configDeleteById } from '@/api/system/gateway';
  import { useDictStoreWithOut } from '@/store/modules/dict';

  const useDict = useDictStoreWithOut();
  const props = defineProps({
    configType: {
      type: String,
      default: 'predicates',
    },
    routerUpdate: {
      type: Boolean,
      default: false,
    },
  });
  const buttonName = props.configType === 'predicates' ? '断言' : '过滤';
  let configNameProps = useDict.getDict(props.configType);
  let configTypeProps = useDict.getDict('1005');
  const columns: BasicColumn[] = [
    {
      title: '配置类型',
      dataIndex: 'configType',
      editRow: true,
      editComponent: 'Select',
      editComponentProps: {
        options: configTypeProps,
      },
      editDynamicDisabled: true,
    },
    {
      title: '配置名称',
      dataIndex: 'configName',
      editRow: true,
      editComponent: 'Select',
      editComponentProps: {
        options: configNameProps,
      },
    },
    {
      title: '配置项',
      dataIndex: 'configKey',
      editRow: true,
    },
    {
      title: '配置值',
      dataIndex: 'configValue',
      editRow: true,
    },
  ];

  const [registerTable, { getDataSource, setTableData }] = useTable({
    columns: columns,
    showIndexColumn: false,
    actionColumn: {
      width: 160,
      title: '操作',
      dataIndex: 'action',
    },
    scroll: { y: '100%' },
    pagination: false,
  });
  // 暴露getDataSource 供父组件使用
  defineExpose({ getDataSource, setTableData });
  function handleEdit(record: EditRecordRow) {
    record.onEdit?.(true);
  }

  async function handleCancel(record: EditRecordRow) {
    record.onEdit?.(false);
    const data = getDataSource();
    let index;
    if (props.routerUpdate) {
      if (null !== record.routerConfigId) {
        index = data.findIndex((item) => item.routerConfigId === record.routerConfigId);
      } else {
        index = data.findIndex((item) => item.key === record.key);
      }
    } else {
      index = data.findIndex((item) => item.key === record.key);
    }
    if (record.isNew) {
      data.splice(index, 1);
    }
  }
  async function handleDel(record: EditRecordRow) {
    const data = getDataSource();
    let index;
    if (undefined !== record.routerConfigId) {
      index = data.findIndex((item) => item.routerConfigId === record.routerConfigId);
      await configDeleteById(record.routerConfigId);
    } else {
      index = data.findIndex((item) => item.key === record.key);
    }
    data.splice(index, 1);
  }
  function handleSave(record: EditRecordRow) {
    record.onEdit?.(false, true);
  }

  function handleAdd() {
    const data = getDataSource();
    const addRow: EditRecordRow = {
      configType: props.configType,
      configName: '',
      configKey: '_genkey_0',
      configValue: '',
      editable: true,
      isNew: true,
      key: `${Date.now()}`,
    };
    data.push(addRow);
  }
  function createActions(record: EditRecordRow): ActionItem[] {
    if (!record.editable) {
      return [
        {
          label: '编辑',
          onClick: handleEdit.bind(null, record),
        },
        {
          label: '删除',
          onClick: handleDel.bind(null, record),
        },
      ];
    }
    return [
      {
        label: '保存',
        onClick: handleSave.bind(null, record),
      },
      {
        label: '取消',
        popConfirm: {
          title: '是否取消编辑',
          confirm: handleCancel.bind(null, record),
        },
      },
    ];
  }
</script>

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="createActions(record)" />
        </template>
      </template>
    </BasicTable>
    <a-button block class="mt-5" type="dashed" @click="handleAdd">
      新增{{ buttonName }}配置
    </a-button>
  </div>
</template>
